<template>
	<view>
		<x-loading></x-loading>
		<!-- 商品图片 -->
		<block>
			<swiper :indicator-dots="true" style="height: 540rpx;">
				<swiper-item v-for="(item, index) in imgDemo" :key="index"><image @click="previewImg(index)" :src="item" mode="widthFix" class="goods_img"></image></swiper-item>
			</swiper>
		</block>
		<view class="padding_box">
			<!-- 商品信息 -->
			<view class="goods_content">
				<view class="goods_price">
					<view class="red_price text_red">￥{{ goods.seckillPrice }}</view>
					<view class="s_price">原价￥{{ goods.price }}</view>
				</view>
				<view class="goods_title">
					<text>{{ goods.goodsName }}</text>
				</view>
			</view>
			<!-- 商品介绍图 -->
			<view class="goods_introduce">
				<!-- <view>商品详情</view> -->
				<u-divider text="商品详情" lineColor="#515151" customStyle="width:250rpx;margin:20rpx auto;"></u-divider>
				<image :src="item" v-for="(item, index) in imgDemo" :key="index" mode="widthFix"></image>
			</view>
			<!-- <u-notice-bar :text="goods.hisRecord" direction="column"></u-notice-bar> -->
		</view>
		<!-- 底部按钮 -->
		<view class="footer">
			<!-- <navigator url="/pages/car/index" open-type="switchTab" hover-class="none" class="btn_car">
				<image src="../../static/icon/tabBar/ic_car.png"></image>
				购物车
			</navigator> -->
			<!-- <button @click="showAlert=true;alertType=0" class="btn_buy">加入购物车</button> -->
			<button class="btn_buy" style="background: #ff9800;">
				<view>
					<div style="display: flex;">
						<div style="margin-left: 14rpx;">
							<div v-if="startTime > 0" style="margin-left: 13rpx; margin-right: 4rpx;">距离本场开始</div>
							<div v-else style="margin-left: 13rpx; margin-right: 4rpx;">距离本场结束</div>
						</div>
						<div style="margin-left: 4rpx;">
							<div>
								<u-count-down @change="chengeTime()" @finish="finishClose(endTime)" :time="startTime > 0 ? startTime : endTime" format="HH:mm:ss"></u-count-down>
							</div>
						</div>
					</div>
				</view>
			</button>
			<button @click="isAlert()" class="btn_buy" style="background: #e51c23;" v-if="startTime < 0 && seckillStatus != 1">抢购</button>
			<button class="btn_buy" style="background: #707070;" v-else-if="seckillStatus == 1">仅限一件</button>
			<button class="btn_buy" style="background: #707070;" v-else>未开始</button>
		</view>
	</view>
</template>

<script>
import config from '@/config';
import { getDetail, timeNow, getAll, seckill, execution, getSeckillOrder } from '@/api/seckill.js';
export default {
	data() {
		return {
			timeData: {},
			endTime: 1,
			curTime: 0,
			startTime: 1,
			nowIndex: 1,
			imageUrl: config.imageUrl, //
			imgDemo: [],
			showAlert: false,
			alertType: 0,
			isOk: false,
			timeNum: 0,
			noticeList: ['编译成功。前端运行日志，请另行在小程序开发工具的控制台查看', '是否显示左侧的音量图标'],
			id: '',
			goods: {},
			// 购买数量
			goodsNum: 1,
			showShare: false,
			startTimes: '',
			endTimes: '',
			seckillList: [],
			isMd5: [],
			activityId: '',
			md5: '',
			status: 2,
			goodsId: '',
			seckillStatus: 2
		};
	},
	onShow(e) {
		// this.getNowTime()
		// this.getStartTime()
		this.getGoods();
	},
	onLoad(options) {
		// wx.showShareMenu({
		// 	withShareTicket: true,
		// 	menus: ['shareAppMessage', 'shareTimeline']
		// })
		// console.log(JSON.parse(options.info), 1234);
		this.seckillList = JSON.parse(options.info);
		this.id = options.id;
		this.activityId = options.activityId;
		this.goodsId = JSON.parse(options.info).goodsId;
		this.getGoodsList();
		this.seckillOrder();
	},
	onShareAppMessage() {
		return {
			title: this.goods.goodsName,
			path: `/pages/index/detail?id=${this.goods.id}`
		};
	},
	methods: {
		seckillOrder() {
			getSeckillOrder({
				goodsId: this.goodsId,
				detailId: this.id
			}).then(res => {
				this.seckillStatus = res.seckillStatus;
			});
		},
		isAlert() {
			execution(this.md5).then(res => {
				uni.navigateTo({
					url: '/pages/mine/order/index?tabIndex=' + 1
				});
				uni.showToast({
					title: `秒杀成功`
				});
			});
		},
		getMd5() {
			if (this.startTime < 0 && this.endTime > 0) {
				seckill(this.activityId).then(res => {
					// let i = this.seckillList
					// let a = i.filter(item => item.id == this.id)
					this.seckillList.md5 = res.md5;
					this.md5 = this.seckillList;
				});
			}
		},
		finishClose(e) {
			if (e < 0) {
				uni.switchTab({
					url: 'index'
				});
			} else if (e > 0) {
				this.reload();
			}
		},
		chengeTime(e) {
			// console.log(e);
			if (e.milliseconds == 0) {
				// this.reload()
			}
		},
		reload() {
			// 页面重载
			const pages = getCurrentPages();
			// 声明一个pages使用getCurrentPages方法
			const curPage = pages[pages.length - 1];
			// 声明一个当前页面
			curPage.onLoad(curPage.options); // 传入参数
			curPage.onShow();
			curPage.onReady();
			// 执行刷新
		},
		changeCount(e) {
			if (e.days == 0 && e.hours == 0 && e.milliseconds == 0 && e.minutes == 0 && e.seconds == 0) {
				this.isOk = true;
			} else {
				this.isOk = false;
			}
		},
		colseSeckill() {
			if (this.endTime < 0) {
				uni.navigateTo({
					url: 'index'
				});
			}
		},
		getGoodsList() {
			timeNow().then(res => {
				this.nowTime = res;
				// getAll().then(res => {
				// this.seckillList = res[0]
				// this.status = this.seckillList.detailList[0].status
				// console.log(this.seckillList.startTime, '555');
				// console.log(this.seckillList.endTime, '555');
				this.startTimes = this.seckillList.startTime;
				this.endTimes = this.seckillList.endTime;
				// 获取距离开始时间
				let isStartTime = Date.parse(new Date(this.startTimes));
				let Time = isStartTime - this.nowTime;
				this.startTime = Time;
				// 获取距离结束时间
				let isEndTime = Date.parse(new Date(this.endTimes));
				let Times = isEndTime - this.nowTime;
				this.endTime = Times;
				// console.log(this.endTime, '66');
				// console.log(this.nowTime, '66');
				this.getMd5();
			});

			// })
		},
		// getStartTime() {
		// 	let startTimes = '2023-3-5 18:00:00'
		// 	let isStartTime = Date.parse(new Date(startTimes))
		// 	let nowTime = Date.parse(new Date())
		// 	let Time = isStartTime - nowTime
		// 	this.startTime = Time
		// },
		// getNowTime() {
		// 	timeNow().then(res => {
		// 		this.curTime = res
		// 	})
		// },
		onChange(e) {
			this.timeData = e;
		},
		getGoods() {
			this.$showLoading();
			getDetail(this.id)
				.then(res => {
					this.goods = res;
					let cTime = new Date(this.curTime);
					let startTime = new Date(res.startTime);
					let sTime = parseInt(cTime - startTime);
					let endTime = new Date(res.endTime);
					// console.log(res, startTime, endTime);
					let eTime = parseInt(endTime - cTime);
					// console.log(sTime, '-', eTime, cTime);
					if (sTime >= 0 && eTime >= 0) {
						console.log('可以');
						this.isOk = true;
						this.timeNum = eTime;
					} else {
						if (sTime < 0) {
							this.isOk = false;
							this.timeNum = Math.abs(sTime);
						}
						if (eTime < 0) {
							this.isOk = false;
							this.timeNum = Math.abs(eTime);
						}
					}
					// if(sTime<0){
					// 	this.isOk=false
					// 	this.timeNum=sTime
					// }else{
					// 	if(eTime<=0){
					// 		this.isOk=false
					// 	}
					// }
					this.imgDemo.push(this.imageUrl + res.image);
					// uni.setStorageSync('goods', this.goods)
					this.$hideLoading();
				})
				.catch(error => {});
		},
		// 查看图片
		previewImg(i) {
			uni.previewImage({
				urls: this.imgDemo,
				current: i
			});
		},
		toOrder() {
			uni.share({});
			const info = new Object();
			info.picturePath = this.goods.picturePath;
			info.name = this.goods.name;
			info.quantity = this.goodsNum;
			info.price = this.goods.goodsPrice;
			info.goodsId = this.goods.id;
			const detailList = new Array();
			detailList.push(info);
			uni.navigateTo({
				url: `subOrder?info=${JSON.stringify(detailList)}`,
				success: () => {
					this.showAlert = false;
				}
			});
		},
		// 添加购物车
		addCar() {
			var car = uni.getStorageSync('car') || new Array();
			const info = new Object();
			info.picturePath = this.goods.picturePath;
			info.goodsName = this.goods.name;
			info.quantity = this.goodsNum;
			info.price = this.goods.goodsPrice;
			info.id = this.goods.id;
			var isNew = true;
			for (var i = 0; i < car.length; i++) {
				if (car[i].id == info.id) {
					car[i].quantity += info.quantity;
					isNew = false;
					break;
				}
			}
			if (isNew) {
				car.unshift(info);
			}
			uni.setStorageSync('car', car);

			this.showAlert = false;
			uni.showToast({
				icon: 'none',
				title: '已加入购物车'
			});
		},

		onOpen() {},
		// 选择规格
		selectSpecifications(e, index) {
			for (var i = 0; i < this.specificationsList.length; i++) {
				this.specificationsList[i].checked = false;
			}
			this.specificationsList[index].checked = !e.checked;
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: 90rpx;
}

.btn_share {
	border: none;
	display: block;
}

.mask {
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
}

.share_alert {
	margin: auto;
	width: 550rpx;
	height: 384rpx;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 50rpx 80rpx;
	color: #515151;
	position: relative;
}

.share_alert_title {
	text-align: center;
	font-size: 30rpx;
	margin-bottom: 50rpx;
}

.share_option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	font-size: 26rpx;
}

.share_option image {
	width: 120rpx;
	height: 120rpx;
	margin-bottom: 10rpx;
}

.share_option .ic_close {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	z-index: 1;
	width: 48rpx;
	height: 48rpx;
}

.text_red {
	color: #f56c6c;
}

.goods_img {
	width: 100%;
}

.padding_box {
	padding: 30rpx 20rpx 20rpx;
}

.goods_content {
	border-bottom: 10rpx solid #f0f0f0;

	.goods_price {
		display: flex;
		margin-bottom: 20rpx;
		align-items: baseline;

		.red_price {
			font-size: 42rpx;
			margin-right: 40rpx;
			font-weight: bold;
		}

		.s_price {
			font-size: 26rpx;
			color: #8a8a8a;
			text-decoration: line-through;
		}
	}

	.goods_title {
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
		color: #2c2c2c;
		font-weight: bold;
		padding: 10rpx 20rpx 10rpx 0px;
	}

	.goods_info {
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		color: #8a8a8a;
		padding: 30rpx 30rpx 10rpx;
	}
}

.goods_introduce {
	& > image {
		width: 100%;
	}
}

.buyer {
	background-color: rgba(245, 108, 108, 0.2);
	border: 2rpx solid #8a8a8a;
	margin: 10rpx auto;
	width: 100%;
	color: #f56c6c;
	font-size: 28rpx;
	padding: 20rpx;

	.buyer_item {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;

		.ic_horn {
			width: 40rpx;
			height: 40rpx;
			margin-right: 40rpx;
		}
	}
}

.footer {
	width: 100%;
	height: 90rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;

	.btn_car {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 40%;

		& > image {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.btn_buy {
		width: 80%;
		display: flex;
		background-color: #ff9800;
		color: #fff;
		align-items: center;
		height: 100%;
		justify-content: center;
	}
}

.alert {
	padding: 20rpx;
	background-color: #fff;
	width: 100%;

	.alert_title {
		display: flex;
		justify-content: space-between;

		.goods_info {
			display: flex;

			.goods_img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 20rpx;

				& > image {
					width: 100%;
				}
			}

			.goods_price {
				font-size: 42rpx;
				color: #f56c6c;
				font-weight: bold;
			}
		}

		.alert_right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: space-between;

			.ic_close {
				width: 48rpx;
				height: 46rpx;
			}
		}
	}

	.goods_specifications {
		margin: 20rpx auto;

		.title {
			margin-bottom: 20rpx;
		}

		.specifications_list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.specifications_item {
				border: 2rpx solid #333;
				border-radius: 6rpx;
				padding: 4rpx 16rpx;
				font-size: 28rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}

			.checked_item {
				border-color: #f56c6c;
				color: #f56c6c;
			}
		}
	}

	.btn_buy {
		width: 30%;
		display: flex;
		background-color: #ff9800;
		color: #fff;
		align-items: center;
		height: 100%;
		justify-content: center;
	}
}
</style>
<style lang="scss">
.time {
	@include flex;
	align-items: center;

	&__custom {
		margin-top: 0px;
		// width: 22px;
		height: 22px;
		// background-color: #fff;
		border-radius: 4px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;

		&__item {
			font-size: 24rpx;
			text-align: center;
		}
	}

	&__doc {
		padding: 0px 4rpx;
	}

	&__item {
		color: #606266;
		font-size: 24rpx;
		margin-right: 4px;
	}
}

.shop {
	display: flex;
	justify-content: space-between;
	margin-bottom: 36rpx;
}

.shop .left {
	height: 258rpx;
	width: 250rpx;
	background-color: skyblue;
	margin-right: 30rpx;
	margin-left: 20rpx;
}

.shop .rigth {
	height: 240rpx;
	width: 480rpx;
	font-size: 34rpx;
}

.shop .shopInfo {
	font-weight: 700;
}

.shop_price {
	color: #9e571c;
	display: flex;
	justify-content: space-between;
	width: 430rpx;
	background-color: #f4cf89;
	border-radius: 16rpx;
}

.shop_price .price_left {
	line-height: 80rpx;
	font-weight: 700;
	margin-left: 20rpx;
	font-size: 32rpx;
}

.shop_price .price_right {
	width: 215rpx;
	background-color: #ff2525;
	color: #f2ebf0;
	font-size: 28rpx;
	padding-left: 20rpx;
	border-radius: 16rpx;
}

.next_shopBox {
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
}

.next_shop {
	margin-top: 20rpx;
	width: 300rpx;
	height: 74rpx;
	border-style: none;
	border-color: unset;
	// color: rgb(255, 37, 37);
	color: #873800;
	border-radius: 8px;
	font-size: 14px;
	padding: 0px;
	text-align: center;
	line-height: 20px;
	font-weight: bold;
	font-style: normal;
	background: rgb(242, 242, 247);
	line-height: 74rpx;
}

.active-class {
	color: #ff2525;
}

.u-count-down__text {
	color: #fff !important;
	font-size: 28rpx !important;
	line-height: 74rpx !important;
}
</style>
